<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="app">
        <p>页面DOM</p>
    </div>
    <template id="temp">
        <div>
            <p ref="pdom">msg:{{msg}}</p>
            <input type="text" v-model="msg">
            <br>
            <input type="button" value="销毁" @click="destroy()">
        </div>
    </template>

</body>
<script>
    var vm = new Vue({
        el:"#app",
        template:"#temp",
        data:{
            msg:"测试数据"
        },
        methods: {
            destroy(){
                this.$Destroy();
            }
        },

        beforeCreate() {
            console.group("beforeCreate==>实例创建和环境构建和生命周期函数");
            console.log("this:",this);
            console.log("options:",this.$options);
            console.log("el:",this.$el);  // undefined 容器未构建
            console.log("data:",this.$data); // undefined 数据仓库未构建
            console.groupEnd();
        },
        created: function () {  // 常用！！！
            console.group("created==>实例功能注入，数据仓库的劫持生成，计算属性的关联……");
            console.log("el:",this.$el);  // undefined 容器未构建
            console.log("data:",this.$data); // 数据仓库已构建
            console.groupEnd();
        },
        beforeMount: function () { 
            console.group("beforeMount==>此时虚拟DOM已经完成构建，未完成和$el的关联（没有完成和Vue实例的关联）");
            console.log("el:",this.$el);  // $el 是el指向的外部元素 
            console.groupEnd();
        },
        mounted: function () {
            console.group("mounted==>完成和$el的关联（完成和Vue实例的关联）");
            console.log("el:",this.$el);  // $el 是vue实例的虚拟DOM对象
            console.groupEnd();
        },
        beforeUpdate: function () { 
            console.group("beforeUpdate==>");
            console.log(this.$refs.pdom.textContent);
            console.groupEnd();
        },
        updated: function () { 
            console.group("updated==>页面更新完成->实际就是$nextTick的执行时机");
            console.log(this.$refs.pdom.textContent); 
            console.groupEnd();
        },
        beforeDestroy: function () { 
            console.group("beforeDestroy==>开始销毁");
            console.log(this.$el.__vue__); 
            console.groupEnd();

        },
        destroyed: function () { 
            console.group("destroyed==>销毁结束");
            console.log(this.$el.__vue__); 
            console.groupEnd();
        }
    })
</script>
</html>